<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入第三方样式,rel固定值，href连接地址-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		
	</head>
	<body>
		<!--container 容器-->
		<div class="container">
			<h3>学生信息管理系统</h3>
			
			<div class="form-group" >
				<!--label有for属性，可以光标定位-->
				<label for="name">姓名</label>
				<!--输入框，placeholder新特性 value设置默认值-->
				<input type="text"  name="name" id="name" class="form-control"placeholder="请输入姓名" />
			</div>
			
			<div class="form-group">
				<label for="age">年龄</label>
				<input type="number" name="age" id="age"  class="form-control" placeholder="请输入年龄" />
			</div>
			<div class="form-group">
				<label name=n"" for="sex">性别(单选框)：</label>
				<!-- radio互斥，同名name只会选择一个-->
				<div class="radio-inline">
				<input type="radio" name="sex" id="sex" checked="checked" class="radio-inline"/>男
				<!-- name id 取同一个名字-->
				</div>
				<div class="radio-inline">
				<input type="radio" name="sex" id="sex"  />女
				</div>
			</div>
			
			<div class="form-group">
				<label for="hobby">爱好(复选框)：</label>
				<!-- 复选框-->
				<div class="checkbox-inline"  name="pb">
					<input type="checkbox" name="hobby" id="hobby"/>乒乓球
				</div>
				<div class="checkbox-inline">
					<input type="checkbox" name="hobby" id="hobby"/>爬山
				</div>
				<div class="checkbox-inline">
					<input type="checkbox" name="hobby" id="hobby" />唱歌
				</div>
			</div>
			<div class="form-group">
				<!-- 单选，选择幼儿园，表单提交“1”到后台，性能高-->
				<label>学历(下拉框)：</label>
				<select name="edu" id="edu">
					<option value="1">幼儿园</option>
					<option value="2">小学</option>
					<option value="3">中学</option>
					<option value="4">高中</option>
					<option value="5" selected="selected">大学</option>
				</select>
				
			</div>
			<div class="form-group">
				<input type="button" name="submit" value="保存" class="btn btn-primary" />
				<button name="clear"  class="btn btn-danger">取消</button >
			</div>
		</div>
		
	</body>
	<script>
		console.log(document.getElementsByName("edu")[0].innerText);
		console.log(document.getElementsByTagName("option")[1].innerText);
		console.log(document.getElementsByClassName("checkbox-inline")[2].innerText);
		var fo=document.getElementsByTagName("option")[1];
		fo.innerText="研究生";
		
		console.log(document.getElementsByClassName("form-group")[3].innerText);
		//console.log(fo);
	</script>
</html>
